<template>
    <div class="main-page">

        <el-form :model="formData" ref="formData"
                 size="mini" class="demo-form-inline">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="科目名称">
                        <el-input suffix-icon="el-icon-search" class="search-input" label="科目名称" v-model="formData.name"
                                  placeholder="必填" @change="initData"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <el-row>
            <el-button type="primary" @click="this.initData" size="mini" icon="el-icon-search">搜索</el-button>
            <el-button type="info" @click="this.addSubjectPanel" size="mini" icon="el-icon-search">添加科目</el-button>
        </el-row>


        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                :row-class-name="tableRowClassName">
                style="width: 100%">
                <el-table-column
                    property="id"
                    label="编号"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="name"
                    label="科目名称"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button-group>
                            <el-button @click="modifySubjectPanel(scope.$index,scope.row)" class="col-btn" size="mini"
                                       type="primary"
                                       icon="el-icon-edit"></el-button>
                            <el-button @click="deleteSubjectOper(scope.$index,scope.row)" class="col-btn" size="mini"
                                       type="primary"
                                       icon="el-icon-delete"></el-button>
                        </el-button-group>
                    </template>
                </el-table-column>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.pager.pageNo"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="this.pager.pageSize"
                    layout=" prev, pager, next,jumper"
                >
                </el-pagination>
            </div>
        </div>


        <el-dialog
            title=""
            :visible.sync="AddDialogVisible"
        >
            <addSubject ref="addSubjectFrom"></addSubject>
            <template slot="footer">
                <el-row type="flex" justify="end">
                    <el-button @click="closeadd" type="info" plain size="mini">取消</el-button>
                    <el-button @click="addSubject" type="primary" plain size="mini">确认</el-button>
                </el-row>
            </template>

        </el-dialog>


    </div>


</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'

    import addSubject from '@/page/components/addSubject'
    import {addSubjectApi, subjectList, deleteSubject, detailSubjectApi,updateSubjectApi} from '@/api/getData'
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        data() {
            return {
                ismodify: false,
                AddDialogVisible: false,
                loading: false,
                formData: {name: ''},
                pager: {pageNo: 1, pageSize: 5},
                dialogType: '',
                tableData: [],
                rules: {
                    name: [
                        {required: true, message: '', trigger: 'blur'},
                    ]
                },
            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,
            addSubject,

        },

        computed: {
            ...mapGetters(['userinfo'])
        },

        created() {
        },
        mounted() {
            this.initData();

        },
        methods: {
            ...mapActions(['']),
            addSubjectPanel() {
                this.formData={},
                this.ismodify = false;
                this.AddDialogVisible = true;

            },
            async modifySubjectPanel(inde, row) {
                this.ismodify = true;
                this.AddDialogVisible = true;
                const res = await detailSubjectApi({data: {id: row.id}});
                if (res.success == true) {
                    this.$refs.addSubjectFrom.childForm = res.data;
                } else {

                }

            },



            closeadd: function () {
                this.AddDialogVisible = false;
                this.addForm = {};

            },
            async addSubject() {
                this.addForm = this.$refs.addSubjectFrom.childForm;
                var valid = this.$refs.addSubjectFrom.validFrom();
                if (valid) {
                    var res = null;
                    if (this.ismodify)
                        res = await updateSubjectApi({data: this.addForm});
                    else
                        res = await addSubjectApi({data: this.addForm});
                    if (res.success == true) {
                        this.$notify({
                            title: '成功',
                            message: '添加成功!',
                            type: 'success'
                        });
                        this.initData();
                    }
                    else {
                        console.error(
                            "something is error"
                        )

                    }
                }
                else {

                }
                this.AddDialogVisible=false;
            },
            deleteSubjectOper(index, row) {
                this.$confirm('确认删除？')
                    .then(_ => {
                        this.deleteconfirm(row.id);
                    })
                    .catch(_ => {
                    });

            },
            async deleteconfirm(id) {
                const res = await
                    deleteSubject({data: {"id": id}});
                if (res.success == true) {
                    this.$notify({
                        title: '成功',
                        message: '删除成功!',
                        type: 'success'
                    });
                    this.initData();
                }
                else {
                    console.error(
                        "something is error"
                    )

                }
            },
            tableRowClassName({row, rowIndex}) {

            },

            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            async initData(pager) {
                if(pager==null) pager= {pageNo: 1, pageSize: 5};
                this.tableData = [];
                this.formData.pager = this.pager;
                const res = await subjectList({"data": this.formData});
                var list = res.data;
                if (res.success == true) {
                    list.forEach(item => {
                        const tableData = {};
                        tableData.id = item.id;
                        tableData.name = item.name;
                        this.tableData.push(tableData);
                    });
                }

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.pager.pageNo = val;
                this.initData(this.pager);
            },
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .el-table .sks {
        background: #c2e7b0;
    }

    .el-table .zss {
        background: #ffffff;
    }

    .el-table .zts {
        background: #fab6b6;
    }

    .el-table .common {
        background: #F5F5F5;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .table_container {
        padding: 20px;
    }

    input {
        width: 600px;
    }
</style>
